<template>
	<div class="page-wrap" data-title="用户详情页面">
		<div class="page-top">
			<user_detail_info />
		</div>
		<div class="page-bottom">
			<div class="page-ctx">
				<div class="user-add-assets">
					<el-button type="primary" @click="doAddAssets()">
						调整资产
					</el-button>
				</div>

				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="余额记录" name="余额记录">
						<div class="panel-item" data-title="余额记录">
							<user_detail_balance ref="user_detail_balance" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="积分记录" name="积分记录">
						<div class="panel-item" data-title="积分记录">
							<user_detail_points ref="user_detail_points" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="粉丝记录" name="粉丝记录">
						<div class="panel-item" data-title="粉丝记录">
							<user_detail_fans ref="user_detail_fans" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="佣金记录" name="佣金记录">
						<div class="panel-item" data-title="佣金记录">
							<user_detail_commission ref="user_detail_commission" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>

		</div>

		<user_assets_modal ref="user_assets_modal" @confirm="confirmSetAssets" />
	</div>
</template>

<script>
	import user_detail_info from './user-detail/user-detail-info.vue';
	import user_detail_balance from './user-detail/user-detail-balance.vue';
	import user_detail_points from './user-detail/user-detail-points.vue';
	import user_detail_fans from './user-detail/user-detail-fans.vue';
	import user_detail_commission from './user-detail/user-detail-commission.vue';


	import user_assets_modal from '@/components/user/user_assets_modal.vue';
	import {
		mapState
	} from "vuex";
	export default {
		name: "user-detail",
		components: {
			user_detail_info,
			user_detail_balance,
			user_detail_points,
			user_detail_fans,
			user_detail_commission,

			user_assets_modal,
		},
		data() {
			return {
				id: this.$route.query.id || '',
				info: {

				},
				activeName: "余额记录",
				//
			};
		},
		computed: {},
		watch: {},
		created() {
			this.setView();
		},
		mounted() {},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			setView() {
				// this.$api({
				// 	url: "",
				// 	method: "get",
				// 	data: {
				// 		action: 'users_detail',
				// 		id: this.id
				// 	},
				// }).then((res) => {
				// 	// console.warn("新闻详情", res);
				// 	if (res.code == 200) {
				// 		this.info = res.data
				// 	}
				// });
			},

			doAddAssets() {
				this.$refs.user_assets_modal.init({
					id: this.id
				})
			},
			confirmSetAssets() {
				this.do_user_assets_list_refresh()
			},
			do_user_assets_list_refresh() {
				if (this.activeName == '余额记录') {
					this.$refs.user_detail_balance.setView()
				} else if (this.activeName == '积分记录') {
					this.$refs.user_detail_points.setView()
				} else if (this.activeName == '粉丝记录') {
					this.$refs.user_detail_fans.setView()
				}
			}
		},
	};
</script>

<style scoped lang="less">
	.page-wrap {
		.page-inner {}
	}

	.page-bottom {
		margin-bottom: 10px;
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.page-ctx {
		position: relative;

		.user-add-assets {
			z-index: 10;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>